<template>
  <li>
    <header>Prop</header>
    <ul>
      <li>
        Prop的大小写
        <blog-post post-title="你好！"/>
      </li>
      <li>
        Prop类型
        <blog-post-1/>
        <blog-post-2/>
      </li>
      <li>
        传递一个静态或动态Prop
        <blog-post-3/>
        <blog-post-3 title="我的Vue旅程"/>
        <blog-post-3 v-bind:title="post.title"/>
        <blog-post-3 v-bind:title="post.title + ' by ' + post.author.name"/>
        <ol>
          <li>传入一个数字</li>
          <li>传入一个布尔值</li>
          <li>传入一个数组</li>
          <li>传入一个对象</li>
          <li>传入一个对象的所有属性</li>
        </ol>
        <!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
        <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
        <blog-post-1 v-bind:title="'静态传值'" v-bind:likes="42"/>
        <!-- 用一个变量进行动态赋值。-->
        <blog-post-1 v-bind:title="'动态赋值'" v-bind:likes="post.likes"/>
        <!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
        <blog-post-1 v-bind:title="'都意味着 `true`'" is-published/>
        <!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
        <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
        <blog-post-1 v-bind:title="'我们仍然需要 `v-bind` 来告诉 Vue'" v-bind:is-published="false"/>
        <!-- 用一个变量进行动态赋值。-->
        <blog-post-1 v-bind:title="'动态赋值'" v-bind:is-published="post.isPublished"/>
        <!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
        <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
        <blog-post-1 v-bind:title="'我们仍然需要 `v-bind` 来告诉 Vue'" v-bind:comment-ids="[236, 266, 273]"/>
        <!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
        <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
        <blog-post-1 v-bind:title="{name: 'Veronica', company: 'Veridian Dynamics'}"/>
        <!-- 用一个变量进行动态赋值。-->
        <blog-post-1 v-bind:title="'传入一个对象'" v-bind:author="post.author"/>
        <!-- 传入一个对象的所有属性 -->
        <blog-post-1 v-bind="post"/>
      </li>
      <li>
        单向数据流
        <counter v-bind:initialCounter="3"/>
        <size v-bind:size="'  20px  '"/>
      </li>
      <li>
        Prop 验证
        <validate-prop propC="required"/>
        <ol>
          <li>类型检查</li>
        </ol>
        <people :author="john"/>
      </li>
      <li>
        非 Prop 特性
        <ol>
          <li>替换/合并已有的特性</li>
          <li>禁用特性继承</li>
        </ol>
        <p>
          <bootstrap-date-input data-date-picker="activated"/>
        </p>
        <p>
          <bootstrap-date-input class="date-picker-theme-dark"/>
        </p>
        <p>
          <base-input v-model="username" required placeholder="请输入用户名" label="用户名："/>
        </p>
      </li>
    </ul>
  </li>
</template>

<script>
import BlogPost from "./samples/BlogPost";
import BlogPost1 from "./samples/BlogPost1";
import BlogPost2 from "./samples/BlogPost2";
import BlogPost3 from "./samples/BlogPost3";
import Counter from "./samples/Counter";
import Size from "./samples/Size";
import ValidateProp from "./samples/ValidateProp";
import People from "./samples/People";
import Person from "./Person";
import BootstrapDateInput from "./samples/BootstrapDateInput";
import BaseInput from "./samples/BaseInput";

export default {
  name: "Prop",
  components: {
    BlogPost,
    BlogPost1,
    BlogPost2,
    BlogPost3,
    Counter,
    Size,
    ValidateProp,
    People,
    BootstrapDateInput,
    BaseInput
  },
  data() {
    return {
      post: {
        title: "这是标题",
        author: { name: "维罗妮卡", company: "威尔士动力学院" },
        likes: 99,
        isPublished: true
      },
      john: new Person("约翰", "逊"),
      username: "user name"
    };
  }
};
</script>